<template>
  <div id="bbb" style="width: 820px; height: 330px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['07/01', '07/01', '07/01', '07/01', '07/01', '07/01', '07/01','07/01','07/01','07/01'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '20%', // 将柱状图宽度改细
            itemStyle: {
              color: "#1890FF",
              borderRadius: [5, 5, 0, 0] // 设置柱状图头部为弧度效果
            },
            data: [10, 52, 200, 334, 390, 330, 220,220,220,220,220]
          }
        ]
      }
    };
  },
  mounted() {
    var chartDom = document.getElementById('bbb');
    var myChart = echarts.init(chartDom);
    this.option && myChart.setOption(this.option);
  }
};
</script>
